<template>
  <div>
    <Menu menu-active="/download" />
    <layout>
      <template v-slot:main>
        <el-row :gutter="20">
          <el-col :lg="18" style="margin-bottom: 20px;">
            <div class="download_detial_container height_light_bgcolor" v-loading="detailLoading"
              element-loading-text="正在玩命加载中...">
              <div class="download_type_wrapper">
                <div class="download_detail_isstus">
                  <div class="download_detial_title">
                    <span>{{ detailData.data.title }}</span>
                  </div>
                  <div style="margin-top:20px">
                    <span class="text_muted">所属方向：</span>
                    <el-tag size="large">{{ dirName }}</el-tag>
                  </div>
                  <div style="margin-top:20px">
                    <el-button type="primary" round @click="handleClickPreviewFile">立即预览</el-button>
                    <el-button type="primary" round @click="handleClickDownloadFile">立即下载</el-button>
                  </div>
                </div>
                <div class="type_wrap">
                  <div class="download_type_img">
                    <img :src="fileTypeIcon" alt="">
                  </div>
                  <div class="text_muted" style="margin-top:8px">
                    资源大小：
                    <template v-if="detailData.data.contentLength">
                      {{ sizeTostr(detailData.data.contentLength) }}
                    </template>
                    <template v-else>
                      {{ detailData.data.contentLength }}
                    </template>
                  </div>
                </div>
              </div>
              <div class="source_desc text_muted">
                {{ detailData.data.description }}
              </div>
            </div>
          </el-col>
          <el-col :lg="6">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card_header">
                  <span style="font-size:16px">相关格式资源</span>
                </div>
              </template>
              <div class="card_content" v-loading="contectLoading" element-loading-text="正在玩命加载中...">
                <div class="source_item cursor_class" v-for="item in contectResData" :key="item.id"
                  @click="handleClcikToDetail(item.id)">
                  <p>{{ item.title }}</p>
                </div>
                <el-empty description="暂无数据~" v-if="!contectLoading && contectResData.length <= 0" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </layout>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import Menu from '@/components/Menu/index.vue'
import Layout from '@/components/Layout/index.vue'
import Footer from '@/components/Footer/index.vue'
import Avatar from '@/components/Avatar/index.vue'
import {
  Tickets,
  UserFilled,
  RefreshLeft,
  Plus,
  Document,
  User,
  ChatDotSquare,
  View,
  Timer,
  Pointer,
  More,
  Location,
  Link,
  OfficeBuilding,
  EditPen
} from '@element-plus/icons-vue'
import router from '@/router'
import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from 'vue'
import { getResourceDetail, getResourceList } from '@/api/download'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getDirection } from "@/api/dictionary";
import doc from '@/assets/images/DOC.png'
import excel from '@/assets/images/excel.png'
import pdf from '@/assets/images/pdf.png'
import txt from '@/assets/images/txt.png'
import zip from '@/assets/images/zip.png'
import noImg from '@/assets/images/noImg.png'
import { sizeTostr, downloadFile } from '@/utils/index'
import request from '@/utils/request'
const { proxy } = getCurrentInstance();
const Route = useRoute();
const id = Route.params.id as string
const detailData = reactive<any>({ data: {} })
const dirName = ref<string>('')
const detailLoading = ref<boolean>(false)
const contectResData = ref<any>([])
const contectLoading = ref<boolean>(false)
const getResourceDetailData = async () => {
  if (!id) {
    return ElMessage({
      message: '获取详情ID失败',
      type: 'error',
      duration: 2 * 1000
    })
  }
  try {
    detailLoading.value = true
    const { data }: any = await getResourceDetail({ id })
    detailData.data = data
  } finally {
    detailLoading.value = false
  }
}
const getDirectOptionsData = async () => {
  const { data }: any = await getDirection()
  let obj = data.find((item: { id: any }) => item.id === detailData.data.directionId)
  console.log(obj);
  dirName.value = obj.name
}
const fileTypeIcon = computed(() => {
  const format = detailData.data.format
  let icon = noImg || undefined
  if (format === 'doc') {
    icon = doc
  } else if (format === 'zip' || format === 'rar' || format === '7z') {
    icon = zip
  } else if (format === 'xls') {
    icon = excel
  } else if (format === 'txt') {
    icon = txt
  } else if (format === 'pdf') {
    icon = pdf
  }
  return icon
})
const handleClickPreviewFile = () => {
  window.open(proxy.$baseImgUrl + detailData.data.url)
}
const handleClickDownloadFile = async () => {
  downloadFile(proxy.$baseImgUrl + detailData.data.url, detailData.data.title, '.' + detailData.data.format)
}
// 根据格式获取相关资源
const getContectResData = async () => {
  try {
    contectLoading.value = true
    const { rows }: any = await getResourceList({
      format: detailData.data.format
    })
    contectResData.value = rows.filter((item: { title: any }) => (item.title !== detailData.data.title)).splice(0, 10)
  } finally {
    contectLoading.value = false
  }
}
const handleClcikToDetail = (id: string | number) => {
  const url = router.resolve({
    name: 'download-detail',
    params: {
      id
    }
  })
  window.open(url.href, '_blank')
}
onMounted(async () => {
  await getResourceDetailData()
  getContectResData()
  getDirectOptionsData()
})
</script>

<style scoped lang="scss">
// @import '@/assets/style/reset.scss';
@import './index.scss';
</style>
